//import {createApp} from 'vue'
import { createRouter, createWebHistory, createRouterMatcher } from 'vue-router'

import store from "../store"
import Home from '../views/Home'
import Index from '../views/Index.vue'
import axios from "@/axios";
import cardtest from '../views/cardtest'
import login from '../views/Login'
import SideMenu from '../views/inc/SideMenu'
import QuestionPage from '../views/QuestionPage'
import UserCenter from '../views/UserCenter'
// import UserCenter from '../views/UserCenter';
// import qs from "qs";
import App from '../App'
import {createApp} from "vue";

const app = createApp(App)
    // app.use(createRouter).use(createWebHistory).use(createRouterMatcher)

// app.config.globalProperties.$qs = qs;

const routes = [
        {
        path: '/',
        name: 'Home',
        component: Home,
        // component: login,
        // component: cardtest,
        redirect: '/login',

        // redirect: '/cardtest',
        children: [
            {
            path:'/Index',
            name:'Index',
            component:Index
            // children: [

                // {
                //     path: '/login',
                //     name: 'login',
                //     // component: () => import('../views/Login')
                //     component: login
                //     // path: '/login',
                //     // name: 'Login',
                //     // component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
                // }
            // ]
            },
            {
                path: '/userCenter',
                name: 'UserCenter',
                component: UserCenter
            },

            ]
        },

            // {
            //     path: '/index',
            //     name: 'Index',
            //     component: Index
            // },
            // {
            //     path: '/sys/users',
            //     name: 'SysUser',
            //     component:User
            //     // component: () => import('../views/sys/User')
            // },
            // {
            //     path: '/sys/roles',
            //     name: 'SysRole',
            //     component: Role
            //     // component: () => import('../views/sys/Role')
            // },
            // {
            //     path: '/menus',
            //     name: 'Menu',
            //     component: Menu
            //     // component: () => import('../views/sys/Menu')
            // },
            // {
            //     path: '/inc/SideMenu',
            //     name: '侧边栏',
            //     // component: () => import('../views/inc/SideMenu')
            //     component:SideMenu
            // },


            {
            path: '/login',
            name: 'login',
            component: () => import('../views/Login')
            // component: login,
            },
            // {
            //     path: '/QuestionPage',
            //     name:'答题页',
            //     component: QuestionPage
            // },
            //
            // {
            //     path:'/Home',
            //     name:'Home',
            //     component: Home
            // }

]

const index = createRouter({
    history: createWebHistory(),
    base: process.env.BASE_URL,
    routes
})

// index.afterEach((to, from) => {
//
// })

index.beforeEach((to, from, next) => {



    let hasRoute = store.state.menus.hasRoute
    console.log("222")
    //localStorage.setItem("User", null

    let param = JSON.parse(localStorage.getItem("User2"));
    // let param = JSON.parse(localStorage.getItem("User1"));
    console.log("本地User1 = ", param);
    console.log("hasRoute = ", hasRoute);
    if (!hasRoute && JSON.parse(localStorage.getItem("User2")) !== null) {
        let param = JSON.parse(localStorage.getItem("User2"));
        console.log("本地User2 = ", param);



        axios.post("api/sys/menu/nav", param).then(res => {
            // console.log("获得的导航菜单：", res)
            let authorization = [];
            let temp = {};
            temp.data = {
                nav: res.data.data,
                authorization: authorization
            }




            console.log("菜单nav = ", temp.data);
            //拿到menuList
            store.commit("setMenuList", temp.data.nav)
            //拿到用户权限
            store.commit("setPermList", temp.data.authorization)

            //动态绑定路由
            let newRoutes = index.options.routes;
            temp.data.nav.forEach(menu => {
                if (menu.children) {
                    menu.children.forEach(e => {
                        //转成路由
                        let route = menuToRoute(e);
                        //把路由添加到路由管理中
                        if (route) {
                            newRoutes[0].children.push(route)
                        }
                    })
                }
            })
            newRoutes.forEach(news => {
                index.addRoute(news);
            })
            next({...to, replace: true})
            // index.addRoute(newRoutes);
            hasRoute = true;
            store.commit("changeRouteStatus", hasRoute)
        })
    } else {
        next();
    }
})

//导航转成路由
const menuToRoute = (menu) => {
    if (!menu.component) {
        return null;
    }
    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            icon: menu.icon,
            title: menu.title
        }
    }
    route.component = () => import('@/views/' + menu.component + '.vue')
    return route
}

export default index
